<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>SisAcad - Sistema Acadêmico</title>
<style type="text/css">

</style>
</head>
<body>
	<form action="#" id="frmAluno">
		Nome: <input type="text" name="nome"><br/>
		Matrícula: <input type="text" name="matricula"><br/>
		<input type="submit" id="btnAluno" value="Salvar" class="btn">
		<span id="mensagem"></span>
	</form>
	
	<table class="table" id="listaAluno">
		<thead>
			<tr>
				<th>Nome</th>
				<th>Matrícula</th>
			</tr>
		</thead>
		<tbody>
			
		</tbody>
	</table>
	<g:javascript>
		$("#btnAluno").click(function(event){
			event.preventDefault();
			$.ajax({
				method:"POST",
				data:$("#frmAluno").serialize(),
				url:"/sisacad/aluno/salvarAjax",
				complete:function(data){
					var retornoJSON = $.parseJSON(data.responseText);
					$("#mensagem").html("Aluno cadastrado:"+retornoJSON.id);
					atualizarListaAluno();
				}
			})
			$("#frmAluno").each(function(){
   				this.reset();
			});
		})
		
		function atualizarListaAluno(){
			$.ajax({
				method:"GET",
				cache: false,
				url:"/sisacad/aluno/listaAjax",
				complete:function(data){
					var retornoJSON = $.parseJSON(data.responseText);
					var linha = "";
					$.each(retornoJSON, function(i, val) {
				       linha += "<tr><td>"+val.nome+"</td><td>"+val.matricula+"</td></tr>";
				    });
				    console.info(linha);
				    $("#listaAluno tbody").html(linha);
				}
			})
		}
		
		$(document).ready(function(){
			atualizarListaAluno();
		});
	</g:javascript>
</body>
</html>
